<template>
	<div class="flex-col">
		<div class="flex flex-grow overflow-hidden h-screen rounded-xl">
			<div v-if="renderVideoPlayer" :class="isCollapsed ? 'flex-1' : 'w-3/4'">
				<VideoPlayer :url="videoSrc" :type="videoType" />
			</div>
			<div
				v-if="!isCollapsed"
				class="w-1/4 bg-gray-800 p-4 overflow-y-auto h-full flex flex-col justify-between rounded-2xl rounded-l-none"
			>
				<div>
					<div class="flex relative mb-1">
						<h2 class="text-lg font-bold mb-2">评论消息</h2>
						<a-button class="absolute top-0 right-2 mb-2" type="primary" ghost @click="toggleCollapse">折叠</a-button>
					</div>
					<div class="space-y-2">
						<div v-if="comments.length">
							<a-list
								:header="`${comments.length} replies`"
								item-layout="horizontal"
								:data-source="comments"
								class="text-white"
							>
								<template #renderItem="{ item }">
									<a-list-item>
										<a-comment :author="item.author" :avatar="item.avatar" class="text-white">
											<template #content>
												<p>{{ item.content }}</p>
											</template>
											<template #datetime>
												<a-tooltip class="text-gray-400"> </a-tooltip>
											</template>
										</a-comment>
									</a-list-item>
								</template>
							</a-list>
						</div>
						<div v-else>
							<a-empty></a-empty>
						</div>
					</div>
				</div>
				<a-comment>
					<template #avatar>
						<a-avatar :src="myavatar" alt="头像" />
					</template>
					<template #content>
						<a-form-item>
							<a-textarea v-model:value="content" :rows="3" />
						</a-form-item>
						<a-form-item>
							<a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
								发表评论
							</a-button>
						</a-form-item>
					</template>
				</a-comment>
			</div>
			<div v-else class="absolute right-0 flex flex-col items-center justify-between h-full w-2 mr-4">
				<div>
					<a-button shape="round" ghost @click="toggleCollapse">评论</a-button>
					<a-button shape="round" ghost class="mt-3">分享</a-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onMounted, watch } from 'vue'
	import dayjs from 'dayjs'
	import relativeTime from 'dayjs/plugin/relativeTime'
	import { useRoute } from 'vue-router'
	import { useUserStore } from '@/store/user'
	import { _createComment, _getComments } from '@/api/comment'
	import { _getVideo } from '@/api/video'
	import { VideoPath } from '@/utils/constVar'
	import { push } from 'notivue'
	const route = useRoute()

	dayjs.extend(relativeTime)

	const videoSrc = ref<string>('')
	const videoType = ref<string>('')
	const title = ref<string>('')
	const description = ref<string>('')
	const createTime = ref<string>('')
	// const author = ref<string>('')
	interface Comment {
		author: string
		avatar: string
		content: string
		datetime: string
	}
	const comments = reactive<Comment[]>([])
	const submitting = ref<boolean>(false)
	const page = ref<number>(0)
	const isCollapsed = ref<boolean>(true)
	const content = ref<string>('')
	const userStore = useUserStore()
	const myavatar = ref<string>('')

	function toggleCollapse() {
		isCollapsed.value = !isCollapsed.value
	}

	function handleSubmit() {
		if (!content.value || content.value.length < 3) {
			push.info({
				title: '评论内容为空',
				message: `请评论不少于3字符`,
			})
			return
		}

		submitting.value = true
		let params = {
			videoId: route.params.videoID,
			content: content.value,
		}
		_createComment(params)
		setTimeout(() => {
			submitting.value = false
			comments.push({
				author: userStore.username,
				avatar: userStore.avatar,
				content: content.value,
				datetime: dayjs().fromNow(),
			})
			comments.length > 10 ? comments.pop() : null
			content.value = ''
		}, 1000)
	}

	onMounted(() => {
		_getVideo(null, route.params.videoID as string).then((data: any) => {
			videoSrc.value = '/api' + VideoPath + '/' + data.srcURL
			title.value = data.title
			description.value = data.description
			createTime.value = data.createTime
			videoType.value = data.videoType
		})
		console.log(videoType.value)
		let params = {
			videoId: route.params.videoID,
			pageReq: {
				limit: 10,
				page: page.value,
			},
		}
		_getComments(params).then((data) => {
			data.content.forEach((item) => {
				const comment: Comment = {
					author: item.usersEntity.username,
					avatar: item.usersEntity.avatar || '',
					content: item.content,
					datetime: item.ceateTime,
				}
				comments.push(comment)
			})
		})
	})
	const renderVideoPlayer = ref<boolean>(false)

	watch(videoSrc, (newVal) => {
		if (newVal) {
			renderVideoPlayer.value = true
		}
	})
</script>

<style scoped>
	/* 你可以在这里添加额外的样式 */
</style>
